<template>
    <div>
        <h1>{{$route.meta.title}}</h1>
        <!-- 搜索区域 -->
        <div class="search">
            <el-select value="按订单号查询">
                <el-option value="按订单号查询"></el-option>
            </el-select>
            <el-input v-model="searchValue" placeholder="订单号"></el-input>
            <el-button @click="search">查询</el-button>
        </div>
        <!-- 搜索区域 -->
        <!-- 表格区域  -->
        <el-table :data="data" stripe style="width: 100%">
            <el-table-column prop="orderNo" label="订单号" width="180">
            </el-table-column>
            <el-table-column prop="receiverName" label="收件人" width="180">
            </el-table-column>
            <el-table-column prop="statusDesc" label="订单状态" width="180">
            </el-table-column>
            <el-table-column prop="payment" label="订单总价" width="180">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180">
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <a href="#" @click="look(scope.row.orderNo)">查看</a>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格区域  -->
        <!--   分页器区域  -->
        <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!--   分页器区域  -->
    </div>
</template>

<script>
import { getOrderList } from "@/utils/api";
export default {
    data() {
        return {
            searchValue: "",
            data: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
        };
    },
    methods: {
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum;
            this.getData();
        },
        look(orderNo) {
            // console.log(orderNo);
            this.$router.push({
                path: "/order/detail",
                query: {
                    orderNo,
                },
            });
        },
        search() {
            if (this.searchValue != "") {
                this.data = this.data.filter((item) => {
                    return item.orderNo == this.searchValue;
                });
            } else {
                this.getData(this.pageNum);
            }
        },
        getData() {
            getOrderList(this.pageNum).then((res) => {
                this.data = res.data.data.list;
                this.pageNum = res.data.data.pageNum;
                this.pageSize = res.data.data.pageSize;
                this.total = res.data.data.total;
            });
        },
    },
    created() {
        this.getData();
    },
};
</script>

<style lang="scss" scoped>
h1 {
    font-weight: normal;
}
select {
    width: 150px;
    height: 30px;
}
.search {
    display: flex;
    margin: 20px 0;
    .el-select {
        flex-basis: 10%;
    }
    .el-input {
        flex-basis: 10%;
        margin: 0 20px;
    }
    .el-button {
        flex-basis: 5%;
    }
}
</style>